<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>realize a MVVM framework</title>
    <style type="text/css">
        #p_text {
            font-size: 40px;
        }
        #tpl1 {
            width: 100px;
            height: 100px;
            background: red;
        }
        #tpl2 {
            display: inline-block;
        }
        #buttonOn{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div id="tpl">
    <button id="buttonOn" m-on = "click:change()"></button>
    <div id="for" m-for="li in list">
        <div id="forItem" m-for="iitem in li.age">
            <p id="forItemPN" :if="showFlag">sss</p>
            <p id="forItemP" m-text="iitem" :if="showFlag"></p>
        </div>
        <p id="forItemName" m-text="li.name"></p>
    </div>
    <div id="forNext1" m-show="showFlag">showFLag显示</div>
    <div id="forNext2" m-text="test"></div>
</div>

<script src="./js/JSpringMin.js"></script>
<script>

    JSpringMin([
        'tpl',
        function ($scope){
             $scope.change = function(){
                 alert(2);
                 $scope.test= 'gg'
             }
        },
        function (){
            return data = {
                showFlag:false,
                test: 'ss',
                list: [
                    {
                        name:11,
                        age:[1,2,3,4,5]
                    },
                    {
                        name:211,
                        age:[1,2,3,4,5]
                    },{
                        name:311,
                        age:[1,2,3,4,5]
                    }],
                change:function($scope){
                    $scope.test='sdddd'
                }    
            }
        }
    ]);

</script>

</body>
</html>